<template>
    <div class="flex flex-row w-full h-full book-marker" >
      <div class="flex flex-col w-full h-full pages-side">
        <div class="flex flex-row h-8 text-white tabs" style="border-bottom: 1px solid #000;">
          <div :class="['flex flex-1 justify-center items-center cursor-pointer ',{'bg-[#666]':leftTabIndex==0}]" @click="leftTabIndex=0">页码</div>
          <div :class="['flex flex-1 justify-center items-center cursor-pointer ',{'bg-[#666]':leftTabIndex==1}]" @click="leftTabIndex=1">目录</div>
        </div>
        <div class="flex-1 w-full overflow-y-auto">
          <BookPagesVue v-if="leftTabIndex==0"></BookPagesVue> 
          <BookMenuVue v-if="leftTabIndex==1"></BookMenuVue>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import BookMenuVue from "./BookMenu.vue";
  import BookPagesVue from "./BookPages.vue"
  import { ref} from "vue"
  let leftTabIndex=ref(0)
  
  </script>
  <style scoped lang="scss">
  
  </style>